<div class="alert alert-success"><span class="glyphicon glyphicon-info-sign"></span> 添加素材，以便在自动回复图文消息时应用。</div>
<form action="" class="form-horizontal" role="form">

	<div class="form-group">
		<label class="col-sm-1 control-label">标题</label>
		<div class="col-sm-5">
			<input type="text" id="title" class="form-control" name="title" placeholder="" datatype="*" value="{$material.title}"/>
		</div>
	</div>
	
	<div class="form-group">
		<label class="col-sm-1 control-label">封面</label>
		<div class="col-sm-5">
			<input type="text" id="cover-url" name="cover_url" class="form-control margin-bottom"  value="{$material.cover_url}"/>
			<input type="file" name="file_upload" id="image_upload" />
		</div>
	</div>
	
	<div class="form-group">
	    <label class="col-sm-1 control-label">摘要</label>
	    <div class="col-sm-5">
	    	<input type="text" id="description" class="form-control" name="description" placeholder="" value="{$material.description}"/>
	    </div>
	</div>
	
	<div class="form-group">
		<label class="col-sm-1 control-label">素材类型</label>
		<div class="col-sm-5">
			<select name="type" class="form-control" id="type">{$material.typeOptions}</select>
		</div>
	</div>
	
	<div class="form-group none" id="material-news">
		<label class="col-sm-1 control-label">图文</label>
		<div class="col-sm-5">
			<script id="autoreply-img-txt-content" type="text/plain">{$material.news}</script>
		</div>
	</div>
	
	<div class="form-group none" id="material-url">
	    <label class="col-sm-1 control-label">链接</label>
	    <div class="col-sm-5">
	    	<input type="text" class="form-control" name="url" placeholder="" value="{$material.url}"/>
	    </div>
	</div>
	
	<div class="form-group">
		<div class="col-sm-offset-1 col-sm-8">
			<a class="btn btn-default" onclick="javascript:history.go(-1)">返回上页</a>
			<a class="btn btn-default" onclick="self.location=document.referrer">返回上页并刷新</a>
			<input type="hidden" name="id" value="{$material.id}"/>
			<button type="submit" class="btn btn-primary submit" data-loading-txt="提交中，请稍后……" data-ajax-url="__CONTROLLER__/modifyPost">保存更改</button>
		</div>
	</div>
</form>
<section class="msg-privew col-sm-4" id="msg-privew">
	<h3 class="msg-title">图文标题</h3>
	<div class="msg-cover">
		<img src="{$material.cover_url}"/>
	</div>
	<p class="msg-description">摘要</p>
</section>
<style type="text/css">
.panel-body{position: relative;}
	.msg-privew{position: absolute; right: 20px; top: 80px; border: 1px solid #ccc; border-radius: 5px; padding:0 10px 10px 10px; width:360px;}
	.msg-privew .msg-cover{height:160px; overflow:hidden;}
	.msg-privew img{width: 100%; background: #eee; border:none;}
</style>
<!-- uploadify -->
<link rel="stylesheet" href="__PUBLIC__/Style/Common/uploadify/uploadify.css">
<script type="text/javascript" src="__PUBLIC__/Style/Common/uploadify/jquery.uploadify.min.js?{:rand(0,9999)}"></script>
<script>
$(function() {
    $("#image_upload").uploadify({
        'multi'			:	false,
        'fileSizeLimit' : 	'200kb',
        'buttonText'	:	'选择图片',
        'fileTypeDesc' 	: 	'Image Files',
        'fileTypeExts' 	: 	'*.jpg; *.png',
        'swf'			: 	'__PUBLIC__/Style/Common/uploadify/uploadify.swf',
        'uploader'		: 	'__MODULE__/Upload/uploadOne',
        'onUploadSuccess'	: function(data, res){
        	var url = eval("(" + res + ")").extra.url;
        	$("#msg-privew .msg-cover img").attr("src", url);
        	$("#cover-url").val( url );
        	
        }
    });
});

//图文填写预览
$(function(){
	$("#title").keyup(function(){
		var msg = ( $(this).val().length == 0 ) ? "图文标题" : ( $(this).val() );
		$("#msg-privew .msg-title").html( msg );
	});
	
	$("#description").keyup(function(){
		var msg = ( $(this).val().length == 0 ) ? "摘要" : ( $(this).val() );
		$("#msg-privew .msg-description").html( msg );
	});
	
	var type =  $("#type option:selected").val();
	if (type == "news") {
		$("#material-news").show();
		$("#material-url").hide();
	} else {
		$("#material-news").hide();
		$("#material-url").show();
	}; 
	
	$("#type").change(function(){
		var sel = $(this).val();
		console.log($(this).val());
		if (sel == "news") {
			$("#material-news").show();
			$("#material-url").hide()
		} else {
			$("#material-news").hide();
			$("#material-url").show();
		}; 
	})
});
</script>

<!-- umeditor -->
<link rel="stylesheet" href="/ue/themes/default/css/umeditor.min.css">
<script type="text/javascript" src="/ue/ueditor.config.js"></script>
<script type="text/javascript" src="/ue/ueditor.all.js"></script>
<script type="text/javascript">
	window.UEDITOR_HOME_URL = "/ue/";
    
    var editor = UE.getEditor("autoreply-img-txt-content",{
    	initialFrameWidth: "100%",
	    initialFrameHeight: 300,
	    textarea: "news"
    });
    
</script>